<!--  -->
<template>
<div>
    <template class="table">
                    <el-form label-position="left" label-width="120px" class="table">
                    <el-form-item label="预约书籍">
                        <el-col :span="12">
                        <el-autocomplete
                        class="inline-input"
                        v-model="Book"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        @select="handleSelect"
                        ></el-autocomplete>
                       </el-col>
                    </el-form-item>
                    <el-form-item label="用户地址">
                        <el-input v-model="UserAddress"  class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="预约时间">
                       <div class="block">
                        <el-date-picker
                        v-model="ApplyTime"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    </el-form-item>
                    <el-form-item class="button">
                    <el-button type="primary" @click="SendApply">发起预约</el-button>
                    <el-button @click="clear">重置</el-button>
                    </el-form-item>
                    </el-form>
          </template>

</div>
</template>

<script>
export default {
data() {
return {
    Data:[],
    Book:"",
    UserAddress:"",
    ApplyTime:'',

}
},
//生命周期 - 创建完成（访问当前this实例）
created() {
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
    this.getBook()
},
methods:{
    filterTime(ApplyTime) {
        // 时间戳转换
        var date = new Date(ApplyTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        return y + "-" + m + "-" + d;
      },
    getBook(){
        var url=`http://localhost:3000/AllBooks`
        // console.log(url)
        this.axios.get(url).then(res=>{
          this.Data=res.data.results.datas
          // console.log(res)
          // console.log(this.Data)
        })
    },
    querySearch(queryString, cb) {
        var restaurants = this.Data;
        for(let i=0;i<restaurants.length;i++){
        restaurants[i].value = restaurants[i].BookName;   
      }
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },
      handleSelect(item) {
        console.log(item);
    },
    SendApply(){
        let Time=this.filterTime(this.ApplyTime)
        let userInfo=JSON.parse(localStorage.getItem("userInfo"));

        if(this.Book!==""&this.UserAddress!==""&this.Time!==""){
            var url=`http://localhost:3000/AddApply?BookName=${this.Book}&ApplyName=${userInfo.uname}&UserAddress=${this.UserAddress}&ApplyTime=${Time}`
            // console.log(url)
            this.axios.get(url).then(res=>{
              console.log(res)
            //   location.reload()
            this.clear()
              this.open1()
            })
        }else{
            alert("请输入内容")
        }
    },
    clear(){
        this.Book=""
        this.UserAddress=""
        this.ApplyTime=""
    },
    open1() {
        this.$notify({
          title: '成功',
          message: '预约成功,请前往预约记录查看预约状态',
          type: 'success'
        });
      },
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
    .table{
        margin-left: 25%;
        margin-top: 5%;
    }
    .input{
        width: 220px;
    }
  
</style>